<template>
  <div>
  
  父子组件初次渲染时执行顺序
  父 beforCreate ==> 父 created ==> 父 beforeMount ==> 子 beforeCreate ==> 子 created ==> 子 beforeMound ==> 子 mounted ==> 父 mounted

  卸载呢？
  父子子父

      <p ref="aaa">ppppppppp</p>
      <input type="text" v-model="val">

      <!-- ref 用在普通标签上获取 到了 真实节点 -->
      
      <Ref-child ref="bbb"></Ref-child>
      <!-- ref 用在了引入的子组件上时 会获取该子组件的实例对象 进而可以调用方法 获取变量等 -->
      <!-- 注意 只会在组件内容渲染完毕才会生效 而且也不是响应式的 -->

      <button @click="getRef">获取 ref</button>

      <!-- vue 不推荐直接操作节点 操作真是dom 的流程是 当你修改节点了 如果你有10个节点需要修改，那么真是操作的节点 他会重新渲染是十遍页面 -->

      <!-- 虚拟Dom 就是一个普通对象 里面是对于真实节点 的映射，当我需要修改时，如果他发现你要修改10个节点，他就会等到一次性把所有节点修改了，而等待和什么时候去修改节点最合适呢 这个是由 deff 算法来决定的 -->
  </div>
</template>

<script>
import RefChild from '../components/RefChild.vue'
export default {
    components:{
        RefChild
    },
    data(){
        return{
             val:"111"
        }
    },
    beforeCreata(){
        console.log(this.val); //无法访问 data 中定义的变量
        console.log("vue 实例创建之前触发");
    },
    // created(){
    //     console.log(this.val); //这里一般会写一些当前页面打开就会执行的方法 比如 发起请求
    //     console.log("vue 实例创建成功之后触发");
    // },
    beforeMound(){
        // 视图层 页面 就是Dom 节点
        // 不建议在这之前操作节点 因为可能接待你 没有渲染完毕
        console.log("视图层编译之前触发");
    },
    // mounted(){
    //     // 虽然我们大多数情况 不操作真实节点 但是 有的时候也是无法避免的
    //     // 比如 使用 echarts 因为这插件需要传入节点 所以当你需要获取节点是 应当再当前生民周期去获取
    //     console.log("视图层编译之后触发");
    // },
    befourUpdate(){
        console.log("数据更新之前触发");
    },
    update(){
        console.log("数据更新之后触发");
    },
    befourDestroy(){
        console.log("vue 实例销毁之前触发");
    },
    destroyed(){
        console.log("vue 实例销毁之后触发");
    },



    created(){
        // this.getRef(); 这个时候节点还没有渲染好
    },
    mounted(){
        this.getRef();
    },
    methods:{
        getRef(){

            // 直接修改内容并输出会获得修改前的内容
            // 解决方法
            // this.$nextTick(() => {
            //     // 会在dom 更新后 自动触发
            //     console.log(this.$refs.aaa.innerText);
            // });



            // vue 获取节点的方式
            // console.log(this.$refs.aaa);
            // console.log(this.$refs['aaa']);
            console.log(this.$refs.bbb);
            console.log(this.$refs.bbb.tit);
            this.$refs.bb.fun(333)
            // 子组件实例对象
        }
    }
}
</script>

<style>

</style>